<template>
  <view :class="formItem.config.class">
    <template v-if="formItem.config['model'] == 'appModel3'">
			<view class="package-model">
				<view class="package-btn-content flex-normal">
					<view class="left-btn flex-center"
						:style="{
							'font-family': setAttr('listDesc_btnPrice', 'fontFamily'),
							'font-size': pxToRpx(setAttr('listDesc_btnPrice', 'fontSize')),
							'color': setAttr('listDesc_btnPrice', 'color'),
						}">
						<text style="font-size: 28rpx;">特惠价</text>
						<text style="font-size: 60rpx;">{{totalWFPrice}}</text>
						<text style="font-size: 28rpx;">元</text>
						<!-- <text style="font-size: 28rpx;">
							即享{{totalWFPrice}}元{{list.length}}项服务
						</text> -->
					</view>
					<view class="right-btn flex-center"
						:style="{
							'font-size': '32rpx',
							'font-family': setAttr('listDesc_btnPackage', 'fontFamily'),
							'color': setAttr('listDesc_btnPackage', 'color'),
						}">
						享原价{{totalPrice}}元服务
						<!-- {{ setAttr('listDesc_btnPackage', 'text')}} -->
					</view>
				</view>
				<view class="package-main-content">
					<view class="col-item flex-column" v-for="(pack) in setList(list, 3)" :key="pack.id">
						<view class="col-label"
						:style="{
							'font-family': setAttr('listTitle_normal', 'fontFamily'),
							'font-size': pxToRpx(setAttr('listTitle_normal', 'fontSize')),
							'color': setAttr('listTitle_normal', 'color'),
						}">{{pack.serveName}}</view>
						<view class="col-money flex-center">
							<view class="money-icon"
								:style="{
								'font-family': setAttr('listIcon_normal', 'fontFamily'),
								'font-size': pxToRpx(setAttr('listIcon_normal', 'fontSize')),
								'color': setAttr('listIcon_normal', 'color'),
							}">￥</view>
							<view class="money-num" 
								:style="{
								'font-family': setAttr('listNum_normal', 'fontFamily'),
								'font-size': pxToRpx(setAttr('listNum_normal', 'fontSize')),
								'color': setAttr('listNum_normal', 'color'),
							}">{{pack.price}}</view>
							<view class="money-desc"
								:style="{
								'font-family': setAttr('listDesc_normal', 'fontFamily'),
								'font-size': pxToRpx(setAttr('listDesc_normal', 'fontSize')),
								'color': setAttr('listDesc_normal', 'color'),
							}">价值</view>
						</view>
					</view>
				</view>
			</view>
      <view class="group-model">
        <view class="group-main-content">
          <view class="group-head flex-between"
            :style="{
              'font-family': setAttr('title', 'fontFamily'),
              'font-size': pxToRpx(setAttr('title', 'fontSize')),
              'color': setAttr('title', 'color'),
            }">
            <view class="head-item">累计份数：{{addUp}}</view>
            <view class="head-item">已售：{{sold}}</view>
          </view>
          <view class="group-list"
            :style="{
              'font-family': setAttr('info', 'fontFamily'),
              'font-size': pxToRpx(setAttr('info', 'fontSize')),
              'color': setAttr('info', 'color'),
            }">
            <view class="group-item flex-between" v-for="(item, idx) in groupList" :key="idx">
              <view class="item-txt" v-if="!item.isTy">{{item.miniValue}}-{{item.maxValue}}人</view>
              <view class="item-txt" v-else>团购价</view>
              <view class="item-txt">{{item.price}}元/份</view>
            </view>
          </view>
        </view>
        <view v-if="completeIncome" class="group-desc"
          :style="{
          	'font-family': setAttr('desc_normal', 'fontFamily'),
          	'font-size': pxToRpx(setAttr('desc_normal', 'fontSize')),
          	'color': setAttr('desc_normal', 'color'),
          }">分享得现金：分享活动，并被购买，将获得{{completeIncome}}元现金奖励</view>
      </view>
    </template>		
		<template v-if="formItem.config['model'] == 'appModel5'">
			<view class="model-5-content">
				<view class="title-content flex-center">
					<view class="title-txt"
						:style="{
							'font-family': setAttr('modelTitle', 'fontFamily'),
							'font-size': pxToRpx(setAttr('modelTitle', 'fontSize')),
							'color': setAttr('modelTitle', 'color'),
						}">{{ setAttr('modelTitle', 'text')}}</view>
				</view>
				<view class="model-5-content-package">
					<view  :class="['package-main-content', list.length <= 2 && 'center']"
						:style="{
							'font-family': setAttr('list_normal', 'fontFamily'),
							'font-size': pxToRpx(setAttr('list_normal', 'fontSize')),
							'color': setAttr('list_normal', 'color'),
						}">
						<view class="col-item flex-column" v-for="(pack) in setList(list, 3)" :key="pack.id">
							<view class="col-label">{{pack.serveName}} * {{ pack.itemNum }}</view>
							<view class="moeny-line"></view>
							<view class="col-money flex-center">
								<view class="money-num">价值{{pack.price}}</view>
							</view>
						</view>
					</view>
					<view class="package-total-content">
						<view class="total-txt"
						:style="{
							'font-family': setAttr('listTotal_normal', 'fontFamily'),
							'font-size': pxToRpx(setAttr('listTotal_normal', 'fontSize')),
							'color': setAttr('listTotal_normal', 'color'),
						}"> 现在下单即享以下项目，总价值{{totalPrice}}元 </view>
						<view class="total-image-content flex-column">
							<view class="image-label">特惠价</view>
							<view class="image-val flex-normal">
								<view class="val-unit">￥</view>
								<view class="val-num">{{totalWFPrice}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="group-model">
					<view class="group-main-content">
						<view class="group-head flex-between"
							:style="{
								'font-family': setAttr('title', 'fontFamily'),
								'font-size': pxToRpx(setAttr('title', 'fontSize')),
								'color': setAttr('title', 'color')
							}">
							<view class="head-item">累计份数：{{addUp}}</view>
							<view class="head-item">已售：{{sold}}</view>
						</view>
						<view class="group-list"
							:style="{
								'font-family': setAttr('info', 'fontFamily'),
								'font-size': pxToRpx(setAttr('info', 'fontSize')),
								'color': setAttr('info', 'color')
							}">
							<view class="group-item flex-between" v-for="(item, idx) in groupList" :key="idx">
								<view class="item-txt" v-if="!item.isTy">{{item.miniValue}}-{{item.maxValue}}人</view>
								<view class="item-txt" v-else>团购价</view>
								<view class="item-num flex-center">{{item.price}}元/份</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="completeIncome" class="package-desc"
					:style="{
						'font-family': setAttr('desc', 'fontFamily'),
						'font-size': pxToRpx(setAttr('desc', 'fontSize')),
						'color': setAttr('desc', 'color')
					}">分享得现金：分享活动，并被购买，将获得{{completeIncome}}元现金奖励</view>
			</view>
		</template>
  </view>
</template>

<script>
import {pxToRpx} from './tools.js'
import { mapGetters } from 'vuex'
import {getPackages, getGroupInfo} from '@/api/hd/index.js'

export default {
  name: 'DPackage',
  computed: {
    ...mapGetters(['vuex_activity']),
    completeIncome(){
      let {completeIncome, whetherToShare} = this.vuex_activity
      if(!whetherToShare) return false
      return completeIncome
    },
  },
	props: {
		formItem:{
			type: Object,
			default: {}
		}
	},
  data(){
    return {
			routeParams: {},
			groupList: [],
			sold: '0',
			addUp: '0',
			list: [],
      totalPrice: 0,
      totalWFPrice: 0
    }
  },
  mounted(){
    let _self = this
		_self.routeParams = uni.getStorageSync('icar-wxActive')
    _self.getTcList()
    _self.getGroupInfo()
  },
  methods: {
    pxToRpx: pxToRpx,
    setList(list, num){
      let len = list.length
      // if(len > num){
      //   return list.slice(0, num)
      // }
      return list
    },
    setAttr(configKey, valKey){
    	let _self = this
    	if(configKey == 'formItem'){
    		return _self.formItem['configH5'][valKey]
    	}else{
    		if(!_self.formItem[configKey]) return
    		return _self.formItem[configKey]['configH5'][valKey]
    	}				
    },
		getGroupInfo(){
			let _self = this
			if(!_self.routeParams['a']) return
			getGroupInfo(_self.routeParams['a']).then(res => {
				let {addUp, groupBuying, sold, groupBuyingPrice} = res.data
				_self.sold = sold
				_self.addUp = addUp
				if(groupBuying){
					_self.groupList = groupBuying
				}else{
					_self.groupList = [{isTy: true, price: groupBuyingPrice}]
				}
			})
		},
		getTcList(){
			let _self = this
			if(!_self.routeParams['a']) return
			getPackages(_self.routeParams['a']).then(res => {
				let {serveList, writeOffPrice = '0.00'} = res.data || {}
				_self.list = serveList || []
				_self.totalWFPrice = parseFloat(writeOffPrice)
        _self.list.forEach(i => {
          _self.totalPrice += parseFloat(i.price)
        })
			})
		},
  },
}
</script>

<style scoped lang="scss">
	// px 转为 rpx 的函数
	@function rem($px) {
	  @return $px * 1rpx;
	}
  .app-model-3.group-package-model{
		// margin: 0;
		// padding: 0 30rpx 30rpx;
		.group-model{
			position: relative;
			.group-main-content{
				padding: 0 rem(65) rem(40);
				border: rem(1) solid #F0CAA6;
				border-radius: rem(20);
				position: relative;
				overflow: hidden;
				&::before, &::after{
					content: '';
					position: absolute;
					width: rem(60);
					height: rem(60);
					border: rem(1) solid #F0CAA6;
					border-radius: 50%;
					top: rem(100);
				}
				&::before{
					left: rem(-30);
				}
				&::after{
					right: rem(-30);
				}
				.group-head{
					padding: rem(50) 0;
				}
				.group-list{
					padding-top: rem(30);
					border-top: rem(1) solid #F0CAA6;
					.group-item{
						background-color: #fff;
						height: rem(68);
						border-radius: rem(33);
						margin-bottom: rem(20);
						padding: 0 rem(30);
						&:last-child{
							margin-bottom: 0;
						}
					}
				}
			}
			.group-desc{
				margin-top: rem(30);
			}
		}
		.package-model{
			position: relative;
			padding: rem(20) 0;
			.package-btn-content{
				.left-btn{
					width: rem(310);
					height: rem(98);
					background: url('/static/image/app-model-3/btn-1.png') no-repeat center;
					background-size: contain;
					border-radius: 0 0 rem(49) rem(49);
				}
				.right-btn{
					width: rem(310);
					height: rem(98);
					background: url('/static/image/app-model-3/btn-2.png') no-repeat center;
					background-size: contain;
					flex: 1;
				}
			}
			.package-main-content{
				padding: rem(44) 0 rem(30);
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: rem(20);
				.col-item{
					position: relative;
					height: rem(208);
					background: url('/static/image/app-model-3/package-normal-bg.png') no-repeat center;
					background-size: contain;
					.col-label{
						position: absolute;
						left: rem(20);
						right: rem(20);
						top: rem(25);
						text-align: center;
					}
					.col-money{
						position: absolute;
						left: rem(20);
						right: rem(20);
						top: rem(120);
						.money-icon{
							font-weight: 500;
						}
						.money-num{
							font-weight: 500;
						}
						.money-desc{
							font-weight: 500;
							writing-mode: tb-rl;
						}
					}
				}
			}
			.package-desc{
				font-size: rem(24);
				color: #FECD8B;
			}
		}
	}
  .app-model-5.group-package-model{
		// margin: 0;
		// padding: 0 30rpx 30rpx;
    .model-5-content{
      border-radius: rem(10);
      box-shadow: rem(3) 0 rem(7) 0 #1863B2;
      .title-content{
        height: rem(137);
        background: url('/static/image/app-model-5/title-bg.png') no-repeat center;
        background-size: contain;
        font-weight: bold;
      }
      .package-desc{
        line-height: 2.4;
        padding: 0 rem(30);
      }
    }
    .model-5-content-package{
      .package-main-content{
        background: linear-gradient(to top, #D1EEFE, #FFFFFF);
        margin: rem(30);
        border-radius: rem(12);
        border: rem(1) solid #3288CE;
        font-weight: bold;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: rem(20);
				padding: rem(15) 0;
				align-items: center;
				justify-items: center;
				&.center{
					grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
					.col-item:nth-child(n)::after{
						display: none;
					}
				}
        .col-item{
          text-align: center;
          padding: rem(20) rem(20);
          position: relative;
          .moeny-line{
            border-bottom: 1px dotted #3288CE;
            width: 100%;
            margin: rem(20) 0 rem(30) 0;
          }
          &:nth-child(3n)::after{
            display: none;
          }
          &::after{
            content: '';
            position: absolute;
            height: rem(160);
            border-right: 1px dotted #3288CE;
            top: 50%;
            transform: translateY(-50%);
            right: rem(-10.5);
          }
        }
      }
      .package-total-content{
        margin: rem(30) 0;
        padding: 0 rem(30);
        position: relative;
        .total-image-content{
          position: absolute;
          background: url('/static/image/app-model-5/th-bg.png') no-repeat center;
          background-size: contain;
          width: rem(160);
          height: rem(130);
          right: 0;
          top: rem(-80);
          text-align: center;
          color: #97651B;
          align-items: center;
          justify-content: center;
          .image-label{
            font-size: rem(24);
          }
          .val-unit{
            font-size: rem(24);
          }
          .val-num{
            font-size: rem(40);
            font-weight: bolder;
          }
        }
      }
    }
    .group-model{
      position: relative;
      .group-main-content{
        position: relative;
        margin: rem(50) rem(30) rem(30);
        border-top: rem(1) dotted #3288CE;
        .group-head{
          padding: rem(50) 0;
          font-weight: 500;
        }
        .group-list{
					padding-bottom: rem(30);
          .group-item{
            height: rem(80);
            border-radius: rem(10);
            margin-bottom: rem(20);
            padding: 0 rem(30);
            border: rem(1) solid #3288CE;
            &:last-child{
              margin-bottom: 0;
            }
          }
          .item-num{
            height: rem(64);
            width: rem(180);
            background-color: #3288CE;
            border-radius: rem(6);
            color: #fff;
          }
        }
      }
    }
  }
</style>
